<script lang="ts" setup>
import { getUrlByFileNo } from '~/api/file'
import { getHealthSX, getjksxxdList } from '~/api/home'
import { decode, encode } from '~/utils/base/dataEncry'

const dayjs = useDayjs()
const title = ref('政策解读')
const routePath = [{ name: '首页', path: '/' }, { name: title }]
const list = ref<any[]>([])
const listXD = ref<any[]>([])
const publicList = ref<any[]>([])
const publicList1 = ref<any[]>([])
const TJlist = ref<any[]>([])
const timeNow = ref('1')
const valuedate = ref('')
const filterModel = ref('')
const imgdata = ref('')
const total = ref(0)
const total2 = ref(0)
const infoType = ref('1')
const infocss = ref('background:linear-gradient(88.92deg, #AC8358 1.07%,rgba(195,228,214,0.22) 99.94%);padding-left:10px')
const queryParams = reactive(
  {
    page: {
      rownumber: 4,
      pageNo: 1,
    },
    condition: [{
      colName: 'classify_name',
      value: '健康陕西/政策解读',
      ruleType: 'like]',
    }],
    positions: '首页',
  },
)
const queryParams2 = reactive(
  {
    page: {
      rownumber: 10,
      pageNo: 1,
    },
    condition: [{
      colName: 'classify_name',
      value: '健康陕西/政策解读',
      ruleType: 'like]',
    }],
    positions: '首页',
  },
)
const queryParams1 = reactive(
  {
    page: {
      rownumber: 8,
      pageNo: 1,
    },
    condition: [{
      colName: 'classify_name',
      value: '健康陕西/健康陕西行动',
      ruleType: 'like]',
    }],
    positions: '首页',
  },
)
const queryParams3 = reactive(
  {
    page: {
      rownumber: 10,
      pageNo: 1,
    },
    condition: [{
      colName: 'classify_name',
      value: '健康陕西/健康陕西行动',
      ruleType: 'like]',
    }],
    positions: '首页',
  },
)
const queryParams4 = reactive(
  {
    page: {
      rownumber: 3,
      pageNo: 1,
    },
    order: [{
      colName: 'release_time',
      orderType: 'desc', // asc升序 desc降序
    }],
    condition: [
      {
        colName: 'column_recommendation',
        ruleType: 'eq',
        value: '是',
      },

    ],
  },
)
const timeYS = ref('background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);color:#fff')
const timeNo = ref('background:none;color:#333;border:1px solid rgba(229,229,234,1);')
const filterList = [{
  label: '政策类型',
  value: '',
  key: 'ssort',
  options: [
    {
      label: '公开指南',
      value: '公开指南',
    },
    {
      label: '政府制度',
      value: '政府制度',
    },
    {
      label: '法定内容',
      value: '法定内容',
    },
    {
      label: '政府年报',
      value: '政府年报',
    },
    {
      label: '申请公开',
      value: '申请公开',
    },
    // {
    //   label: '传染病防控行动',
    //   value: '传染病防控行动',
    // },
    // {
    //   label: '地方病防控行动',
    //   value: '地方病防控行动',
    // },
    // {
    //   label: '健康知识普及行动',
    //   value: '健康知识普及行动',
    // },
    // {
    //   label: '合理膳食行动',
    //   value: '合理膳食行动',
    // },
    // {
    //   label: '全民健身行动',
    //   value: '全民健身行动',
    // },
    // {
    //   label: '控烟限酒行动',
    //   value: '控烟限酒行动',
    // },
    // {
    //   label: '心理健康促进行动',
    //   value: '心理健康促进行动',
    // },
    // {
    //   label: '健康环境促进行动',
    //   value: '健康环境促进行动',
    // },
    // {
    //   label: '中医药健康促进行动',
    //   value: '中医药健康促进行动',
    // },
    // {
    //   label: '残疾预防健康行动',
    //   value: '残疾预防健康行动',
    // },
    // {
    //   label: '健康细胞示范建设行动',
    //   value: '健康细胞示范建设行动',
    // },
    // {
    //   label: '健康保障完善行动',
    //   value: '健康保障完善行动',
    // },
  ],
}]
function onFilter(model: any) {
  filterModel.value = model
  console.log(filterModel.value.ssort)
  queryParams3.condition[0].value = `健康陕西/健康陕西行动/${filterModel.value.ssort}`
  getXDList()
  // getList()
}
function clickTime(item) {
  timeNow.value = item
}
// 分页参数更改
function onPageChange(params: { pageNum: number, pageSize: number }) {
  queryParams2.page.pageNo = params.pageNum
  queryParams2.page.rownumber = params.pageSize
  getData()
}
// 分页参数更改
function onPageChange1(params: { pageNum: number, pageSize: number }) {
  queryParams3.page.pageNo = params.pageNum
  queryParams3.page.rownumber = params.pageSize
  getData()
}
function typeClick(item) {
  infoType.value = item
  if (item == '政策解读') {
    TJlist.value = list.value.slice(0, 3)
  }
  else {
    TJlist.value = listXD.value.slice(0, 3)
  }
}
function getData() {
  getHealthSX(queryParams).then((res) => {
    list.value = res.data
    imgdata.value = getImgUrl(res.data[0].cover_file_name)
  }).catch(() => {
  })
  getHealthSX(queryParams2).then((res) => {
    publicList.value = []
    total.value = res.page.total
    res.data.forEach((element) => {
      publicList.value.push({
        title: element.title_name,
        blurd: extractTextFromPTags(element.contents),
        info: element.origin ? element.origin : '陕西健康教育中心',
        time: dayjs(element.release_time).format('YYYY-MM-DD'),
        url: getImgUrl(element.cover_file_name),
        id: element.id,
      })
    })
  }).catch(() => {
  })
  getXDList()
  getjksxxdList(queryParams1).then((res) => {
    listXD.value = res.data
  }).catch(() => {
  })
}
function getXDList() {
  getHealthSX(queryParams3).then((res) => {
    publicList1.value = []
    total2.value = res.page.total
    res.data.forEach((element) => {
      publicList1.value.push({
        title: element.title_name,
        blurd: extractTextFromPTags(element.contents),
        info: element.origin ? element.origin : '陕西健康教育中心',
        time: dayjs(element.release_time).format('YYYY-MM-DD'),
        url: getImgUrl(element.cover_file_name),
        id: element.id,
      })
    })
  }).catch(() => {
  })
}
function getTJData() {
  getHealthSX(queryParams4).then((res) => {
    TJlist.value = res.data
  }).catch(() => {
  })
}
onMounted(() => {
  getData()
  getTJData()
})
function extractTextFromPTags(htmlString: string) {
  const parser = new DOMParser()
  const doc = parser.parseFromString(htmlString, 'text/html')
  const pTags = doc.getElementsByTagName('p')
  let text = ''
  for (let i = 0; i < pTags.length; i++) {
    text += pTags[i]?.textContent
  }
  return text
}
function clickItem(item) {
  getHealthSX({
    condition: [{ colName: 'id', ruleType: 'eq', value: item.id }],
  }).then((res) => {
    navigateTo({
      path: `/peopleHealth/healthyShaanxiDetail`,
      query: {
        data: encode(res.data[0]),
      },
    })
  })
}
async function backInit() {
  location.reload()
}
</script>

<template>
  <div>
    <PublicSearch type="政策解读" />
    <PublicSearchDialog type="政策解读" />
    <div class="px-40">
      <div class="bg-#fff">
        <CommonPageContainer :title="title" :path="routePath" class="relative">
          <div class="mt-20px flex justify-between">
            <div v-if="infoType == '政策解读'" class="w-85%">
              <div class="flex items-center">
                <div
                  class="h-40px w-40px flex cursor-pointer items-center justify-center rounded-md"
                  style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);" @click="backInit"
                >
                  <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                    <span class="flex items-center -ml-2px" text="#AC8358">&lt;</span>
                  </div>
                </div>
                <span class="pl-4 font-extrabold" text="#AC8358">政策解读</span>
              </div>
              <PublicList :list="publicList" @click-item="clickItem" />
              <PublicPagination :total="total" @change="onPageChange" />
            </div>
            <div v-if="infoType == '健康陕西行动'" class="w-85%">
              <div class="flex items-center">
                <div
                  class="h-40px w-40px flex cursor-pointer items-center justify-center rounded-md"
                  style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);" @click="backInit"
                >
                  <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                    <span class="flex items-center -ml-2px" text="#AC8358">&lt;</span>
                  </div>
                </div>
                <span class="pl-4 font-extrabold" text="#AC8358">政策公开</span>
              </div>
              <PublicFilter class="" :filter-list="filterList" show-type="page" @change="onFilter" />
              <PublicList :list="publicList1" @click-item="clickItem" />
              <PublicPagination :total="total2" @change="onPageChange1" />
            </div>
            <div v-if="infoType == '1'" class="w-80%">
              <div>
                <div class="h-40px w-100% flex justify-between">
                  <div class="flex items-center">
                    <span class="ml-10px inline-block h-8px w-8px bg-#AC8358" />
                    <span class="pl-4 font-extrabold" text="#AC8358">政策解读</span>
                  </div>
                  <div class="flex cursor-pointer" @click="typeClick('政策解读')">
                    <div class="h-20px">
                      更多
                    </div>
                    <img class="ml-5px h-22px" src="/img/more.png" alt="">
                  </div>
                </div>
                <div class="w-100% flex justify-between bg-#F7F9FD p-5">
                  <div class="h-240px w-40%">
                    <img class="h-100% w-100%" :src="getImgUrl(imgdata)" alt="">
                  </div>
                  <div class="w-58%">
                    <div
                      v-for="item in list" class="cursor-pointer py-5px" hover="text-#AC8358"
                      @mouseover="imgdata = item.cover_file_name" @click="clickItem(item)"
                    >
                      <div>{{ item.title_name }}</div>
                      <div class="w-100% flex justify-between" text="#8E8E93">
                        <span>{{ item.origin }}</span>
                        <span>{{ item.release_time }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="mt-5 w-100%">
                <div class="h-40px w-95% flex justify-between">
                  <div class="flex items-center">
                    <span class="ml-10px inline-block h-8px w-8px bg-#AC8358" />
                    <span class="pl-4 font-extrabold" text="#AC8358">政策公开</span>
                  </div>
                  <div class="flex cursor-pointer" @click="typeClick('健康陕西行动')">
                    <div class="h-20px">
                      更多
                    </div>
                    <img class="ml-5px h-22px" src="/img/more.png" alt="">
                  </div>
                </div>
                <div class="grid grid-cols-4 gap-3">
                  <div v-for="item in listXD" hover="text-#AC8358" class="cursor-pointer" @click="clickItem(item)">
                    <div>
                      <img class="h-157px w-100%" :src="getImgUrl(item.cover_file_name)" alt="">
                    </div>
                    <div class="line-clamp-2 mt-2 text-ellipsis px-2">
                      {{ item.title_name }}
                    </div>
                    <div class="flex items-center justify-between p-2">
                      <div text="#333">
                        {{ dayjs(item.release_time).format('YYYY-MM-DD') }}
                      </div>
                      <!-- <div class="p-1 cursor-pointer" text="#AC8358 14px " border="1px solid #AC8358"
                        @click="clickItem(item)">查看详情</div> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-18%">
              <div>
                <div
                  class="h-10px flex items-center rounded-tl rounded-tr px-10px py-5px"
                  style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);"
                />
                <div class="rounded-bl rounded-br" border="2px solid #AC8358">
                  <div
                    class="cursor-pointer p-2 pl-10" :style="infoType == '政策解读' ? infocss : ''"
                    @click="typeClick('政策解读')"
                  >
                    <i
                      v-if="infoType == '政策解读'"
                      class="i-ri:arrow-right-circle-line h-25px w-25px cursor-pointer text-#AC8358"
                    />
                    政策解读
                  </div>
                  <div
                    class="cursor-pointer p-2 pl-10" :style="infoType == '健康陕西行动' ? infocss : ''"
                    @click="typeClick('健康陕西行动')"
                  >
                    <i
                      v-if="infoType == '健康陕西行动'"
                      class="i-ri:arrow-right-circle-line h-25px w-25px cursor-pointer text-#AC8358"
                    />
                    政策公开
                  </div>
                </div>
              </div>
              <div class="mt-20px">
                <div
                  class="h-30px flex items-center rounded-tl rounded-tr px-10px py-5px"
                  style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);"
                >
                  <img src="/img/tj.png" alt="">
                  <div class="pl-15px" text="#fff 16px">
                    推荐
                  </div>
                </div>
                <div class="rounded-bl rounded-br px-10px py-5px" border="2px solid #AC8358">
                  <div
                    v-for="item in TJlist" class="cursor-pointer" hover="text-#AC8358"
                    @click="clickItem(item)"
                  >
                    <img :src="getImgUrl(item.cover_file_name)" class="w-full" alt="">
                    <div class="py-10px" text="14px">
                      {{ item.title_name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CommonPageContainer>
      </div>
    </div>
  </div>
</template>

<style></style>
